<template>
  <view class="container">
    <view class="userinfo">
      <block v-if="!hasUserInfo">
        <button v-if="canIUseGetUserProfile" class="btn" @tap="getUserProfile"> 获取头像昵称 </button>
        <button v-else class="btn" @tap="getUserInfo"> 获取用户信息 </button>
      </block>
      <block v-else>
        <image @tap="bindViewTap" class="userinfo-avatar" :src="userInfo.avatarUrl" mode="cover"></image>
        <text class="userinfo-nickname">{{ userInfo.nickName }}</text>
      </block>
    </view>
    <view class="usermotto">
      <text class="user-motto">{{ motto }}</text>
    </view>
    
    <!-- 新增：测试功能区域 -->
    <view class="test-section">
      <text class="section-title">测试功能</text>
      <button class="btn" @tap="testApi">测试API调用</button>
      <button class="btn" @tap="testStorage">测试本地存储</button>
      <button class="btn" @tap="testNetwork">测试网络请求</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      motto: 'Hello uni-app!',
      userInfo: {
        avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
        nickName: '',
      },
      hasUserInfo: false,
      canIUseGetUserProfile: false,
      canIUseNicknameComp: false,
    }
  },
  onLoad() {
    // 检查API可用性
    this.canIUseGetUserProfile = uni.canIUse('getUserProfile')
    this.canIUseNicknameComp = uni.canIUse('input.type.nickname')
  },
  methods: {
    bindViewTap() {
      uni.navigateTo({
        url: '/pages/logs/logs'
      })
    },
    getUserProfile(e) {
      // 推荐使用uni.getUserProfile获取用户信息
      uni.getUserProfile({
        desc: '展示用户信息',
        success: (res) => {
          console.log(res)
          this.userInfo = res.userInfo
          this.hasUserInfo = true
        }
      })
    },
    getUserInfo(e) {
      // 兼容旧版本
      uni.getUserInfo({
        success: (res) => {
          this.userInfo = res.userInfo
          this.hasUserInfo = true
        }
      })
    },
    // 新增测试方法
    testApi() {
      uni.showToast({
        title: 'API测试成功',
        icon: 'success'
      })
    },
    testStorage() {
      const testData = { time: Date.now(), message: '测试数据' }
      uni.setStorageSync('testData', testData)
      const savedData = uni.getStorageSync('testData')
      uni.showModal({
        title: '存储测试',
        content: `保存成功：${JSON.stringify(savedData)}`,
        showCancel: false
      })
    },
    testNetwork() {
      uni.request({
        url: 'https://api.github.com/users/octocat',
        success: (res) => {
          uni.showModal({
            title: '网络测试',
            content: `请求成功，状态码：${res.statusCode}`,
            showCancel: false
          })
        },
        fail: (err) => {
          uni.showToast({
            title: '网络请求失败',
            icon: 'error'
          })
        }
      })
    }
  }
}
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
  margin: 20rpx 0;
}

.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.usermotto {
  margin-top: 200rpx;
  text-align: center;
}

.user-motto {
  color: #333;
  font-size: 32rpx;
}

.btn {
  background-color: #007aff;
  color: white;
  border-radius: 8rpx;
  padding: 20rpx 40rpx;
  text-align: center;
  margin: 20rpx 0;
  border: none;
}

.btn:active {
  background-color: #0056b3;
}

.test-section {
  margin-top: 60rpx;
  padding: 20rpx;
  background-color: white;
  border-radius: 12rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}
</style>